<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!--标准mui.css-->
    <link rel="stylesheet" href="../css/mui.min.css">
    <!--App自定义的css-->
    <style type="text/css">
			.cameraImg{
				width: 65px;
				height: 65px;
			}

			.showImg{
			    width: 200px;
				height: 260px;
			}





    </style>

</head>

<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">拍照</h1>
</header>
<div class="mui-content">
    <div class="mui-content-padded">
        <p>这是拍照示例，点击如下拍照按钮体验拍照预览功能</p>
        <form class="mui-input-group">
            <div class="mui-input-row">
                <!--<label>关键字</label>-->
                <input type="text" class="mui-input-clear" placeholder="请输入照片命名关键字">
            </div>
        </form>
        <div onclick="takePhoto()" style="text-align: center;">
            <img src="../images/carmer.png" class="cameraImg"/>
        </div>


        <!--显示照片-->
        <div style="text-align: center;margin: 1em;display: none;" id="showPhoto">
            <img id="photo" src="" class="showImg"/>
        </div>

        <!--显示照片信息-->
        <div style="margin: 1em;display: block;" id="photoInfo">
            <p id="photoName"></p>
            <p id="photoPath"></p>
        </div>

    </div>
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../bridge.js"></script>
<script src="../plugins/zepto.min.js"></script>
<script>
			mui.init({
				swipeBack: false
			});
			$(function(){
			Mplat.init(function(){
			//原生调用
			});
			});
			/**
			 * 拍照
			 * @param {Object} params(参数) callback（回调函数，返回data ）
			 */
			function takePhoto() {
				var keyword =$(".mui-input-clear").val();
				if(!keyword){
					mui.toast("请输入照片命名关键字");
				}else{
					Mplat.takePhoto({
					params: {
						"keyword": keyword,
						"waterMarkFlag": "ceshi2",
						"waterMarkInfo": "ceshi3"
					},
					callback: function(data) {
					 mui.toast(data);
					 console.log("111111");
						data = JSON.parse(data);

						showImg(data);

					}
				});
				}

			}


			function goNextPage(id, url) {
				mui.openWindow({
					id: id,
					url: url,
					extras: {},
					waiting: {
						autoShow: true,
						title: "正在加载!"
					}
				});
			};

			//显示照片
			function showImg(data){
				if(data.data.photoPath){
					$("#showPhoto").show();
					$("#photoInfo").show();
					$("#photo").attr("src",data.data.photoPath);
					$("#photoName").text("照片名称："+
					data.data.photoPath.substring(data.data.photoPath.lastIndexOf('\/')+1,data.data.photoPath.length));
					$("#photoPath").text("照片路径："+data.data.photoPath);


				}else{
					mui.toast("未获取到照片路径，请再试一次");
				}


			}




</script>
<script src="../plugins/zepto.min.js"></script>

</html>